<!-- 气泡 -->
<template>
  <div ref="bubble" class="bubble"></div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
const props = defineProps({
  delay: {
    type: String,
    default: '0s'
  },
  size: {
    type: String,
    default: '200px'
  },
  // 左右摇摆距离
  sway: {
    type: Number,
    default: 0
  }
})
const s1 = ref(0); const s2 = ref(0); const s3 = ref(0); const s4 = ref(0); const s5 = ref(0)
const bubble = ref(null)
onMounted(() => {
  const style = bubble.value.style
  s1.value = (parseInt(style.left) - props.sway) + 'px'
  s2.value = style.left
  s3.value = (parseInt(style.left) - props.sway * 0.5) + 'px'
  s4.value = style.left
  s5.value = (parseInt(style.left) + props.sway * 0.5) + 'px'
})
</script>
<style scoped>
.bubble {
  position: fixed;
  top: 100vh;
  width: v-bind('props.size');
  height: v-bind('props.size');
  border-radius: 50%;
  animation: goUp 5s infinite v-bind('props.delay');
  background-image: radial-gradient( transparent 56%, rgba(255,255,255, 0.2) 90%),
                    radial-gradient(farthest-side at 24% 26%, rgba(255,255,255, 0.7) 10px, transparent 20px);
}
@keyframes goUp {
  0% {
    top: 100vh;
  }
  20% {
    left: v-bind(s1);
  }
  40% {
    left: v-bind(s2);
  }
  60% {
    left: v-bind(s3);
  }
  80% {
    left: v-bind(s4);
  }
  100% {
    top: -200px;
    left: v-bind(s5);
  }
}
</style>
